<div class="space-y-8 md:space-y-16" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<header class="p-4" [ngClass]="['bg' + default, 'text' + defaultInv]">
		<div class="container flex justify-between h-16 mx-auto md:justify-center md:space-x-8">
			<ul class="items-stretch hidden space-x-3 md:flex">
				<li class="flex">
					<a
						rel="noopener noreferrer"
						href="#"
						class="flex items-center px-4 -mb-1 border-b-2 border-transparent"
					>
						Link
					</a>
				</li>
				<li class="flex">
					<a
						rel="noopener noreferrer"
						href="#"
						class="flex items-center px-4 -mb-1 border-b-2 border-transparent"
					>
						Link
					</a>
				</li>
				<li class="flex">
					<a
						rel="noopener noreferrer"
						href="#"
						class="flex items-center px-4 -mb-1 border-b-2 border-transparent"
						[ngClass]="['text' + primary, 'border' + primary]"
					>
						Link
					</a>
				</li>
			</ul>
			<a
				class="flex items-center p-2"
				rel="noopener noreferrer"
				href="#"
				aria-label="Back to homepage"
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="w-8 h-8"
					fill="currentColor"
					viewBox="0 0 32 32"
					[ngClass]="['text' + primary]"
				>
					<path
						d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"
					/>
					<path
						d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"
					/>
				</svg>
			</a>
			<ul class="items-stretch hidden space-x-3 md:flex">
				<li class="flex">
					<a
						rel="noopener noreferrer"
						href="#"
						class="flex items-center px-4 -mb-1 border-b-2 border-transparent"
					>
						Link
					</a>
				</li>
				<li class="flex">
					<a
						rel="noopener noreferrer"
						href="#"
						class="flex items-center px-4 -mb-1 border-b-2 border-transparent"
					>
						Link
					</a>
				</li>
				<li class="flex">
					<a
						rel="noopener noreferrer"
						href="#"
						class="flex items-center px-4 -mb-1 border-b-2 border-transparent"
					>
						Link
					</a>
				</li>
			</ul>
			<button class="p-4 md:hidden">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					[ngClass]="['text' + defaultInv]"
					class="w-6 h-6"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M4 6h16M4 12h16M4 18h16"
					/>
				</svg>
			</button>
		</div>
	</header>

	<section class="" [ngClass]="['bg' + default, 'text' + defaultInv]">
		<div
			class="container flex flex-col justify-center p-6 mx-auto sm:py-12 lg:py-24 lg:flex-row lg:justify-between"
		>
			<div
				class="flex flex-col justify-center p-6 text-center rounded-sm lg:max-w-md xl:max-w-lg lg:text-left"
			>
				<h1 class="text-5xl font-bold leading-none sm:text-6xl">
					Ac mattis
					<span [ngClass]="['text' + primary]">senectus</span>
					erat pharetra
				</h1>
				<p class="mt-6 mb-8 text-lg sm:mb-12">
					Dictum aliquam porta in condimentum ac integer
					<br class="hidden md:inline lg:hidden" />
					turpis pulvinar, est scelerisque ligula sem
				</p>
				<div
					class="flex flex-col space-y-4 sm:items-center sm:justify-center sm:flex-row sm:space-y-0 sm:space-x-4 lg:justify-start"
				>
					<a
						class="px-8 py-3 text-lg font-semibold rounded"
						rel="noopener noreferrer"
						href="#"
						[ngClass]="['bg' + primary, 'text' + contrast]"
					>
						Suspendisse
					</a>
					<a
						class="px-8 py-3 text-lg font-semibold border rounded"
						rel="noopener noreferrer"
						href="#"
						[ngClass]="['border' + defaultInv]"
					>
						Malesuada
					</a>
				</div>
			</div>
			<div
				class="flex items-center justify-center p-6 mt-8 lg:mt-0 h-72 sm:h-80 lg:h-96 xl:h-112 2xl:h-128"
			>
				<img
					class="object-contain h-72 sm:h-80 lg:h-96 xl:h-112 2xl:h-128 bg-gray-500"
					src="assets/svg/Business_SVG.svg"
					alt=""
				/>
			</div>
		</div>
	</section>

	<section class="" [ngClass]="['bg' + default, 'text' + defaultInv]">
		<div class="container max-w-xl p-6 py-12 mx-auto space-y-24 lg:px-8 lg:max-w-7xl">
			<div class="">
				<h2
					class="text-3xl font-bold tracking-tight text-center sm:text-5xl"
					[ngClass]="['text' + contrastInv]"
				>
					Aliquip definiebas ad est
				</h2>
				<p
					class="max-w-3xl mx-auto mt-4 text-xl text-center"
					[ngClass]="['text' + plainInv]"
				>
					Quando cetero his ne, eum admodum sapientem ut.
				</p>
			</div>
			<div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
				<div class="">
					<h3
						class="text-2xl font-bold tracking-tight sm:text-3xl"
						[ngClass]="['text' + contrastInv]"
					>
						Ad vix debet docendi
					</h3>
					<p class="mt-3 text-lg" [ngClass]="['text' + plainInv]">
						Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione
						ut, persius eripuit quo id. Sit te euismod tacimates.
					</p>
					<div class="mt-12 space-y-12">
						<div class="flex">
							<div class="flex-shrink-0">
								<div
									class="flex items-center justify-center w-12 h-12 rounded-md"
									[ngClass]="['bg' + primary, 'text' + contrast]"
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										class="w-7 h-7"
										viewBox="0 0 24 24"
										stroke="currentColor"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M5 13l4 4L19 7"
										/>
									</svg>
								</div>
							</div>
							<div class="ml-4">
								<h4
									class="text-lg font-medium leading-6"
									[ngClass]="['text' + contrastInv]"
								>
									Per ei quaeque sensibus
								</h4>
								<p class="mt-2" [ngClass]="['text' + plainInv]">
									Ex usu illum iudico molestie. Pro ne agam facete mediocritatem,
									ridens labore facete mea ei. Pro id apeirian dignissim.
								</p>
							</div>
						</div>
						<div class="flex">
							<div class="flex-shrink-0">
								<div
									class="flex items-center justify-center w-12 h-12 rounded-md"
									[ngClass]="['bg' + primary, 'text' + contrast]"
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										class="w-7 h-7"
										viewBox="0 0 24 24"
										stroke="currentColor"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M5 13l4 4L19 7"
										/>
									</svg>
								</div>
							</div>
							<div class="ml-4">
								<h4
									class="text-lg font-medium leading-6"
									[ngClass]="['text' + contrastInv]"
								>
									Cu imperdiet posidonium sed
								</h4>
								<p class="mt-2" [ngClass]="['text' + plainInv]">
									Amet utinam aliquando ut mea, malis admodum ocurreret nec et,
									elit tibique cu nec. Nec ex maluisset inciderint, ex quis.
								</p>
							</div>
						</div>
						<div class="flex">
							<div class="flex-shrink-0">
								<div
									class="flex items-center justify-center w-12 h-12 rounded-md"
									[ngClass]="['bg' + primary, 'text' + contrast]"
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										class="w-7 h-7"
										viewBox="0 0 24 24"
										stroke="currentColor"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M5 13l4 4L19 7"
										/>
									</svg>
								</div>
							</div>
							<div class="ml-4">
								<h4
									class="text-lg font-medium leading-6"
									[ngClass]="['text' + contrastInv]"
								>
									Nulla omittam sadipscing mel ne
								</h4>
								<p class="mt-2" [ngClass]="['text' + plainInv]">
									At sed possim oporteat probatus, justo graece ne nec, minim
									commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="mt-10 lg:mt-0" aria-hidden="true">
					<img
						class="mx-auto rounded-lg shadow-lg bg-gray-500"
						src="https://source.unsplash.com/random/360x480"
						alt=""
					/>
				</div>
			</div>

			<div class="">
				<div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
					<div class="lg:col-start-2">
						<h3
							class="text-2xl font-bold tracking-tight sm:text-3xl"
							[ngClass]="['text' + contrastInv]"
						>
							Eam nibh gloriatur ex
						</h3>
						<p class="mt-3 text-lg" [ngClass]="['text' + plainInv]">
							Per odio fabellas consulatu cu. Utroque detracto mel ea, quo te latine
							theophrastus. Ea his tale nibh dissentias, mei exerci tamquam euripidis
							cu.
						</p>
						<div class="mt-12 space-y-12">
							<div class="flex">
								<div class="flex-shrink-0">
									<div
										class="flex items-center justify-center w-12 h-12 rounded-md"
										[ngClass]="['bg' + primary, 'text' + contrast]"
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											class="w-7 h-7"
											viewBox="0 0 24 24"
											stroke="currentColor"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M5 13l4 4L19 7"
											/>
										</svg>
									</div>
								</div>
								<div class="ml-4">
									<h4
										class="text-lg font-medium leading-6"
										[ngClass]="['text' + contrastInv]"
									>
										Cibo augue offendit has ad
									</h4>
									<p class="mt-2" [ngClass]="['text' + plainInv]">
										An per velit appellantur, ut utinam minimum nominavi sit,
										odio nostro habemus ne nec. Ne sonet regione contentiones
										est.
									</p>
								</div>
							</div>
							<div class="flex">
								<div class="flex-shrink-0">
									<div
										class="flex items-center justify-center w-12 h-12 rounded-md"
										[ngClass]="['bg' + primary, 'text' + contrast]"
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											class="w-7 h-7"
											viewBox="0 0 24 24"
											stroke="currentColor"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M5 13l4 4L19 7"
											/>
										</svg>
									</div>
								</div>
								<div class="ml-4">
									<h4
										class="text-lg font-medium leading-6"
										[ngClass]="['text' + contrastInv]"
									>
										At eum ferri luptatum lobortis
									</h4>
									<p class="mt-2" [ngClass]="['text' + plainInv]">
										Te per quidam maiorum ocurreret, etiam delicatissimi usu ad.
										Ne has quod periculis. Te sit primis iisque efficiantur.
									</p>
								</div>
							</div>
							<div class="flex">
								<div class="flex-shrink-0">
									<div
										class="flex items-center justify-center w-12 h-12 rounded-md"
										[ngClass]="['bg' + primary, 'text' + contrast]"
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											class="w-7 h-7"
											viewBox="0 0 24 24"
											stroke="currentColor"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M5 13l4 4L19 7"
											/>
										</svg>
									</div>
								</div>
								<div class="ml-4">
									<h4
										class="text-lg font-medium leading-6"
										[ngClass]="['text' + contrastInv]"
									>
										Dicunt verterem evertitur eu sea
									</h4>
									<p class="mt-2" [ngClass]="['text' + plainInv]">
										Audire principes rationibus eam an, autem nominavi luptatum
										per te. Sumo fabulas vim eu, sonet saperet eleifend ut vix.
									</p>
								</div>
							</div>
						</div>
					</div>
					<div class="mt-10 lg:mt-0 lg:col-start-1 lg:row-start-1">
						<img
							class="mx-auto rounded-lg shadow-lg bg-gray-500"
							src="https://source.unsplash.com/random/361x481"
							alt=""
						/>
					</div>
				</div>
			</div>
		</div>
	</section>

	<div
		class="w-full bg-gray-600"
		style="
			background-image: url('https://source.unsplash.com/random/1280x720');
			background-position: center center;
			background-blend-mode: multiply;
			background-repeat: no-repeat;
			background-size: cover;
		"
	>
		<div
			class="container flex flex-col flex-wrap content-center justify-center p-4 py-20 mx-auto md:py-28"
		>
			<h1
				class="text-5xl antialiased font-bold leading-none text-center md:text-6xl"
				[ngClass]="['text' + light]"
			>
				Get Our Updates
			</h1>
			<p class="pt-2 pb-8 text-xl antialiased text-center" [ngClass]="['text' + light]">
				Find out about events and other news
			</p>
			<div class="flex flex-row">
				<input
					type="text"
					class="w-3/5 p-3 rounded-l-lg sm:w-2/3"
					placeholder="example@email.com"
				/>
				<button
					class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3"
					type="button"
					[ngClass]="['bg' + primary, 'text' + contrast]"
				>
					Subscribe
				</button>
			</div>
		</div>
	</div>

	<section class="" [ngClass]="['bg' + default, 'text' + defaultInv]">
		<div class="container flex flex-col p-6 mx-auto">
			<h2 class="py-4 text-3xl font-bold text-center">Temporibus elit</h2>
			<div class="divide-y" [ngClass]="['divide' + neutral]">
				<div class="grid justify-center grid-cols-4 p-8 mx-auto space-y-8 lg:space-y-0">
					<div class="flex items-center justify-center lg:col-span-1 col-span-full">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 512 512"
							class="w-16 h-16"
							fill="currentColor"
						>
							<path
								d="M472,16H168a24,24,0,0,0-24,24V344a24,24,0,0,0,24,24H472a24,24,0,0,0,24-24V40A24,24,0,0,0,472,16Zm-8,320H176V48H464Z"
							/>
							<path d="M112,400V80H80V408a24,24,0,0,0,24,24H432V400Z" />
							<path d="M48,464V144H16V472a24,24,0,0,0,24,24H368V464Z" />
						</svg>
					</div>
					<div
						class="flex flex-col justify-center max-w-3xl text-center col-span-full lg:col-span-3 lg:text-left"
					>
						<span class="text-xs tracking-wider uppercase" [ngClass]="'text' + primary">
							Step 1 - Nihil
						</span>
						<span class="text-xl font-bold md:text-2xl">Veritatis dolores</span>
						<span class="mt-4" [ngClass]="['text' + neutralInv]">
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
							facilis, voluptates error alias dolorem praesentium sit soluta iure
							incidunt labore explicabo eaque, quia architecto veritatis dolores, enim
							cons equatur nihil ipsum.
						</span>
					</div>
				</div>

				<div class="grid justify-center grid-cols-4 p-8 mx-auto space-y-8 lg:space-y-0">
					<div class="flex items-center justify-center lg:col-span-1 col-span-full">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 512 512"
							class="w-16 h-16"
							fill="currentColor"
						>
							<path
								d="M285.177,179l15.513-3.914-7.827-31.028-15.514,3.913a176.937,176.937,0,0,0-129.3,133.557l-3.407,15.633,31.266,6.814,3.406-15.634A145.559,145.559,0,0,1,285.177,179Z"
							/>
							<path
								d="M363.624,147.871C343.733,72.077,274.643,16,192.7,16,95.266,16,16,95.266,16,192.7c0,82.617,57,152.163,133.735,171.4A176.769,176.769,0,0,0,320.7,496c97.431,0,176.7-79.266,176.7-176.695C497.392,238.071,441.64,167.336,363.624,147.871ZM48,192.7C48,112.91,112.91,48,192.7,48s144.7,64.91,144.7,144.7-64.911,144.7-144.7,144.7S48,272.481,48,192.7ZM320.7,464c-60.931,0-115.21-38.854-135.843-94.792,2.6.115,5.214.184,7.843.184a176.862,176.862,0,0,0,32.7-3.047l97.625,97.625C322.247,463.983,321.473,464,320.7,464Zm41.528-6.083L260.26,355.954a176.9,176.9,0,0,0,43.662-26.072L408.37,434.33A144.385,144.385,0,0,1,362.223,457.917Zm69.3-45.692L326.851,307.557a177.082,177.082,0,0,0,27.911-44.5L457.67,365.964A144.661,144.661,0,0,1,431.519,412.225Zm33.594-84.073-99.42-99.42a176.785,176.785,0,0,0,3.7-36.036c0-3.285-.1-6.547-.276-9.787a145.054,145.054,0,0,1,96.276,136.4C465.392,322.276,465.291,325.224,465.113,328.152Z"
							/>
						</svg>
					</div>
					<div
						class="flex flex-col justify-center max-w-3xl text-center col-span-full lg:col-span-3 lg:text-left"
					>
						<span class="text-xs tracking-wider uppercase" [ngClass]="'text' + primary">
							Step 2 - Explicabo
						</span>
						<span class="text-xl font-bold md:text-2xl">Iure incidunt labore</span>
						<span class="mt-4" [ngClass]="['text' + neutralInv]">
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
							facilis, voluptates error alias dolorem praesentium sit soluta iure
							incidunt labore explicabo eaque, quia architecto veritatis dolores, enim
							cons equatur nihil ipsum.
						</span>
					</div>
				</div>

				<div class="grid justify-center grid-cols-4 p-8 mx-auto space-y-8 lg:space-y-0">
					<div class="flex items-center justify-center lg:col-span-1 col-span-full">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 512 512"
							class="w-16 h-16"
							fill="currentColor"
						>
							<path
								d="M412.284,294.37l-12.5,15.642c-8.354,10.454-50.027,64.208-50.027,95.883,0,36.451,28.049,66.105,62.526,66.105s62.527-29.654,62.527-66.105c0-31.675-41.673-85.429-50.028-95.883Zm0,145.63c-16.832,0-30.526-15.3-30.526-34.105,0-11.662,15.485-37.883,30.531-59.2,15.043,21.3,30.522,47.509,30.522,59.2C442.811,424.7,429.116,440,412.284,440Z"
							/>
							<path
								d="M122.669,51.492,96.133,124.4,30.092,97.205,17.908,126.8l67.271,27.7L26.9,314.606a48.056,48.056,0,0,0,28.689,61.523l184.719,67.232a48,48,0,0,0,61.523-28.688L397.6,151.56Zm149.1,352.236a16,16,0,0,1-20.508,9.563L66.537,346.059a16,16,0,0,1-9.563-20.507L73.553,280H316.8ZM85.2,248l29.594-81.311,36.333,14.961a32.644,32.644,0,1,0,11.236-29.98l-36.615-15.077,16.046-44.085,214.79,78.177L328,249.219V248Z"
							/>
						</svg>
					</div>
					<div
						class="flex flex-col justify-center max-w-3xl text-center col-span-full lg:col-span-3 lg:text-left"
					>
						<span
							class="text-xs tracking-wider uppercase"
							[ngClass]="['text' + primary]"
						>
							Step 3 - Facilis
						</span>
						<span class="text-xl font-bold md:text-2xl">Dolorem praesentium</span>
						<span class="mt-4" [ngClass]="['bg' + default, 'text' + neutralInv]">
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
							facilis, voluptates error alias dolorem praesentium sit soluta iure
							incidunt labore explicabo eaque, quia architecto veritatis dolores, enim
							cons equatur nihil ipsum.
						</span>
					</div>
				</div>

				<div class="grid justify-center grid-cols-4 p-8 mx-auto space-y-8 lg:space-y-0">
					<div class="flex items-center justify-center lg:col-span-1 col-span-full">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 512 512"
							class="w-16 h-16"
							fill="currentColor"
						>
							<polygon
								points="388.632 393.82 495.823 255.94 388.684 118.178 363.424 137.822 455.288 255.944 363.368 374.18 388.632 393.82"
							/>
							<polygon
								points="148.579 374.181 56.712 255.999 148.629 137.823 123.371 118.177 16.177 255.993 123.314 393.819 148.579 374.181"
							/>
							<polygon
								points="330.529 16 297.559 16 178.441 496 211.412 496 330.529 16"
							/>
						</svg>
					</div>
					<div
						class="flex flex-col justify-center max-w-3xl text-center col-span-full lg:col-span-3 lg:text-left"
					>
						<span
							class="text-xs tracking-wider uppercase"
							[ngClass]="['text' + primary]"
						>
							Step 4 - Aperiam
						</span>
						<span class="text-xl font-bold md:text-2xl">Explicabo eaque</span>
						<span class="mt-4" [ngClass]="['text' + neutralInv]">
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
							facilis, voluptates error alias dolorem praesentium sit soluta iure
							incidunt labore explicabo eaque, quia architecto veritatis dolores, enim
							cons equatur nihil ipsum.
						</span>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="py-6" [ngClass]="['bg' + default, 'text' + defaultInv]">
		<div class="container p-4 mx-auto space-y-16 sm:p-10">
			<div class="space-y-4">
				<h3 class="text-2xl font-bold leading-none sm:text-5xl">Meet our team</h3>
				<p [ngClass]="['text' + plainInv]" class="max-w-2xl">
					At a assumenda quas cum earum ut itaque commodi saepe rem aspernatur quam natus
					quis nihil quod, hic explicabo doloribus magnam neque, exercitationem eius sunt!
				</p>
			</div>

			<div class="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
				<div
					*ngFor="let person of [1, 2, 3, 4, 5, 6]; let i = index"
					class="flex space-x-6"
				>
					<img
						class="object-cover w-auto h-56 mb-4 bg-center rounded-sm bg-gray-500"
						src="https://source.unsplash.com/240x320/?portrait?{{ i }}"
						alt=""
					/>
					<div class="flex flex-col">
						<h4 class="text-xl font-semibold">Leroy Jenkins</h4>
						<p class="text-sm" [ngClass]="['text' + plainInv]">Web developer</p>
						<div class="flex mt-2 space-x-2">
							<a rel="noopener noreferrer" href="#" [ngClass]="['text' + plainInv]">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 50 50"
									class="w-4 h-4"
									fill="currentColor"
								>
									<path
										d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"
									></path>
								</svg>
							</a>
							<a rel="noopener noreferrer" href="#" [ngClass]="['text' + plainInv]">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									class="w-4 h-4"
									fill="currentColor"
									viewBox="0 0 32 32"
								>
									<path
										d="M8.268 28h-5.805v-18.694h5.805zM5.362 6.756c-1.856 0-3.362-1.538-3.362-3.394s1.505-3.362 3.362-3.362 3.362 1.505 3.362 3.362c0 1.856-1.506 3.394-3.362 3.394zM29.994 28h-5.792v-9.1c0-2.169-0.044-4.95-3.018-4.95-3.018 0-3.481 2.356-3.481 4.794v9.256h-5.799v-18.694h5.567v2.55h0.081c0.775-1.469 2.668-3.019 5.492-3.019 5.875 0 6.955 3.869 6.955 8.894v10.269z"
									/>
								</svg>
							</a>
							<a rel="noopener noreferrer" href="#" [ngClass]="['text' + plainInv]">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									class="w-4 h-4"
									fill="currentColor"
									viewBox="0 0 32 32"
								>
									<path
										d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"
									/>
								</svg>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="py-8" [ngClass]="['bg' + default, 'text' + defaultInv]">
		<div class="container flex flex-col items-center p-4 mx-auto space-y-6 md:p-8">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 512 512"
				class="w-16 h-16"
				[ngClass]="['text' + primary]"
				fill="currentColor"
			>
				<polygon
					points="328.375 384 332.073 458.999 256.211 406.28 179.924 459.049 183.625 384 151.586 384 146.064 496 182.756 496 256.169 445.22 329.242 496 365.936 496 360.414 384 328.375 384"
				/>
				<path
					d="M415.409,154.914l-2.194-48.054L372.7,80.933,346.768,40.414l-48.055-2.2L256,16.093,213.287,38.219l-48.055,2.2L139.3,80.933,98.785,106.86l-2.194,48.054L74.464,197.628l22.127,42.715,2.2,48.053L139.3,314.323l25.928,40.52,48.055,2.195L256,379.164l42.713-22.126,48.055-2.195,25.928-40.52L413.214,288.4l2.195-48.053,22.127-42.715Zm-31.646,76.949L382,270.377l-32.475,20.78-20.78,32.475-38.515,1.76L256,343.125l-34.234-17.733-38.515-1.76-20.78-32.475L130,270.377l-1.759-38.514L110.5,197.628,128.237,163.4,130,124.88,162.471,104.1l20.78-32.474,38.515-1.76L256,52.132l34.234,17.733,38.515,1.76,20.78,32.474L382,124.88l1.759,38.515L401.5,197.628Z"
				/>
			</svg>
			<p
				class="px-6 py-2 text-2xl font-semibold text-center sm:font-bold sm:text-3xl md:text-4xl lg:max-w-2xl xl:max-w-4xl"
				[ngClass]="['text' + neutralInv]"
			>
				"Veniam quidem animi ea maxime odit fugiat architecto perferendis ipsum perspiciatis
				iusto, provident qui nam dolorum corporis."
			</p>
			<div class="flex justify-center space-x-3">
				<img
					class="w-20 h-20 bg-center bg-cover rounded-md bg-gray-500"
					[ngClass]="['bg' + neutral]"
					src="https://source.unsplash.com/80x80/?portrait"
					alt=""
				/>
				<div>
					<p class="leading-tight">Leroy Jenkins</p>
					<p class="text-sm leading-tight" [ngClass]="['text' + neutralInv]">
						Founder, Company
					</p>
					<a
						[routerLink]="['/']"
						class="flex items-center py-2 space-x-1 text-sm"
						[ngClass]="['text' + primary]"
					>
						<span>Read full story</span>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
								fill-rule="evenodd"
								d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
								clip-rule="evenodd"
							/>
						</svg>
					</a>
				</div>
			</div>
		</div>
	</section>

	<div
		[ngClass]="['bg' + default, 'text' + defaultInv]"
		class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-16 mx-auto rounded-lg md:grid-cols-2 md:px-12 lg:px-16 xl:px-32"
	>
		<div class="flex flex-col justify-between">
			<div class="space-y-2">
				<h2 class="text-4xl font-bold leading-tight lg:text-5xl">Let's talk!</h2>
				<div [ngClass]="['text' + plainInv]">Vivamus in nisl metus? Phasellus.</div>
			</div>
			<img
				src="assets/svg/doodle.svg"
				alt="Contact our customer support"
				class="p-6 h-52 md:h-64"
			/>
		</div>
		<form class="space-y-6">
			<div>
				<label for="name" class="text-sm">Full name</label>
				<input
					id="name"
					class="w-full p-3 rounded"
					type="text"
					placeholder="Your name"
					[ngClass]="['bg' + default]"
				/>
			</div>
			<div class="">
				<label for="email" class="text-sm">Email</label>
				<input
					id="email"
					class="w-full p-3 rounded"
					type="email"
					placeholder="Your email"
					[ngClass]="['bg' + default]"
				/>
			</div>
			<div class="">
				<label for="message" class="text-sm">Message</label>
				<textarea
					id="message"
					rows="3"
					class="w-full p-3 rounded"
					placeholder="Your message"
					[ngClass]="['bg' + default]"
				></textarea>
			</div>
			<button
				type="submit"
				class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded"
				[ngClass]="['bg' + primary, 'text' + contrast]"
			>
				Send Message
			</button>
		</form>
	</div>

	<section class="" [ngClass]="['bg' + default, 'text' + defaultInv]">
		<div class="container flex flex-col justify-center p-4 mx-auto md:p-8">
			<p class="p-2 text-sm font-medium tracking-wider text-center uppercase">How it works</p>
			<h2 class="mb-12 text-4xl font-bold leading-none text-center sm:text-5xl">
				Frequently Asked Questions
			</h2>
			<div class="grid gap-10 md:gap-8 sm:p-3 md:grid-cols-2 lg:px-12 xl:px-32">
				<div>
					<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
					<p class="mt-1" [ngClass]="['text' + plainInv]">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit?
						Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur
						ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus
						culpa!
					</p>
				</div>
				<div>
					<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
					<p class="mt-1" [ngClass]="['text' + plainInv]">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit?
						Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur
						ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus
						culpa!
					</p>
				</div>
				<div>
					<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
					<p class="mt-1" [ngClass]="['text' + plainInv]">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit?
						Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur
						ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus
						culpa!
					</p>
				</div>
				<div>
					<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
					<p class="mt-1" [ngClass]="['text' + plainInv]">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit?
						Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur
						ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus
						culpa!
					</p>
				</div>
				<div>
					<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
					<p class="mt-1" [ngClass]="['text' + plainInv]">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit?
						Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur
						ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus
						culpa!
					</p>
				</div>
				<div>
					<h3 class="font-semibold">Lorem ipsum dolor sit amet.</h3>
					<p class="mt-1" [ngClass]="['text' + plainInv]">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, fugit?
						Aspernatur, ullam enim, odit eaque quia rerum ipsum voluptatem consequatur
						ratione, doloremque debitis? Fuga labore omnis minima, quisquam delectus
						culpa!
					</p>
				</div>
			</div>
		</div>
	</section>

	<footer class="py-6" [ngClass]="['bg' + default, 'text' + contrastInv]">
		<div
			class="container px-6 mx-auto space-y-6 divide-y divide-gray-400 md:space-y-12 divide-opacity-50"
		>
			<div class="grid grid-cols-12 gap-6">
				<div class="pb-6 col-span-full md:pb-0 md:col-span-6">
					<a
						class="flex justify-center space-x-3 md:justify-start"
						rel="noopener noreferrer"
						href="#"
					>
						<div
							class="flex items-center justify-center w-12 h-12 rounded-full"
							[ngClass]="['bg' + primary]"
						>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="w-5 h-5 rounded-full"
								viewBox="0 0 32 32"
								fill="currentColor"
								[ngClass]="['text' + contrast]"
							>
								<path
									d="M18.266 26.068l7.839-7.854 4.469 4.479c1.859 1.859 1.859 4.875 0 6.734l-1.104 1.104c-1.859 1.865-4.875 1.865-6.734 0zM30.563 2.531l-1.109-1.104c-1.859-1.859-4.875-1.859-6.734 0l-6.719 6.734-6.734-6.734c-1.859-1.859-4.875-1.859-6.734 0l-1.104 1.104c-1.859 1.859-1.859 4.875 0 6.734l6.734 6.734-6.734 6.734c-1.859 1.859-1.859 4.875 0 6.734l1.104 1.104c1.859 1.859 4.875 1.859 6.734 0l21.307-21.307c1.859-1.859 1.859-4.875 0-6.734z"
								/>
							</svg>
						</div>

						<span class="self-center text-2xl font-semibold">Brand name</span>
					</a>
				</div>
				<div class="text-center col-span-full sm:col-span-6 md:text-left md:col-span-2">
					<p class="pb-1 text-lg font-medium">Category</p>
					<ul>
						<li *ngFor="let i of [1, 2, 3, 4, 5]">
							<a
								rel="noopener noreferrer"
								href="#"
								class=""
								[ngClass]="['hover:text' + primary]"
							>
								Link
							</a>
						</li>
					</ul>
				</div>
				<div class="text-center col-span-full sm:col-span-6 md:text-left md:col-span-2">
					<p class="pb-1 text-lg font-medium">Category</p>
					<ul>
						<li *ngFor="let i of [1, 2, 3, 4, 5]">
							<a
								rel="noopener noreferrer"
								href="#"
								class=""
								[ngClass]="['hover:text' + primary]"
							>
								Link
							</a>
						</li>
					</ul>
				</div>
				<div class="text-center col-span-full sm:col-span-6 md:text-left md:col-span-2">
					<p class="pb-1 text-lg font-medium">Category</p>
					<ul>
						<li *ngFor="let i of [1, 2, 3, 4, 5]">
							<a
								rel="noopener noreferrer"
								href="#"
								class=""
								[ngClass]="['hover:text' + primary]"
							>
								Link
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="grid justify-center pt-6 lg:justify-between">
				<div
					class="flex flex-col self-center text-sm text-center md:block lg:col-start-1 md:space-x-6"
				>
					<span>©1998 All rights reserved</span>
					<a class="" rel="noopener noreferrer" href="#">
						<span>Privacy policy</span>
					</a>
					<a class="" rel="noopener noreferrer" href="#">
						<span>Terms of service</span>
					</a>
				</div>
				<div class="flex justify-center pt-4 space-x-4 lg:pt-0 lg:col-end-13">
					<a
						class="flex items-center justify-center w-10 h-10 rounded-full"
						[ngClass]="['bg' + primary, 'text' + contrast]"
						rel="noopener noreferrer"
						href="#"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-5 h-5"
						>
							<path
								d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
							/>
							<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
						</svg>
					</a>
					<a
						class="flex items-center justify-center w-10 h-10 rounded-full"
						[ngClass]="['bg' + primary, 'text' + contrast]"
						rel="noopener noreferrer"
						href="#"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 50 50"
							class="w-5 h-5"
							fill="currentColor"
						>
							<path
								d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"
							></path>
						</svg>
					</a>
					<a
						class="flex items-center justify-center w-10 h-10 rounded-full"
						[ngClass]="['bg' + primary, 'text' + contrast]"
						rel="noopener noreferrer"
						href="#"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="w-6 h-6"
							fill="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
							></path>
						</svg>
					</a>
				</div>
			</div>
		</div>
	</footer>
</div>
